{% extends 'htmls/base_template.html' %}
{% load static %}
{% block content_section %}
    <script type="application/javascript">
         function change_image(btn, file_id, file_name, image_id, width, height) {
            var txt = btn.value;
            var input = null;

            if (txt == '更改') {
                input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('id', file_id);
                input.setAttribute('name', file_name);
                input.setAttribute('class', 'form-control');
                input.setAttribute('style', 'margin-top: 5px;');
                input.setAttribute('accept', 'image/jpeg,image/png,image/gif');
                input.setAttribute('onchange', 'upload_image(\''+file_id+'\', \''+image_id+'\', '+width+', '+height+');');
                btn.value = "取消";

                btn.parentNode.insertBefore(input, btn.nextSibling);
            } else {
                input = document.getElementsByName(file_name)[0];
                input.parentNode.removeChild(input);
                btn.value  = "更改";
            }

            return false;
        }

         function update_product() {
             var formData = new FormData($('form')[0]);

                                $.ajax({
                                    url: '{{ update_product_api_url }}',
                                    type: 'POST',
                                    data: formData,
                                    async: false,
                                    success: function (data) {
                                        if (validate_return(data)) {
                                            window.location.href = '{{ query_product_page_url }}';
                                        }
                                        return true;
                                    },
                                    error: function (jqXHR, textStatus, errorThrown) {
                                        alert(textStatus);
                                    },
                                    cache: false,
                                    contentType: false,
                                    processData: false
                                });
         }
    </script>

    <div class="row">
        <div class="col-sm-12">
            <div class="panel panel-default">

                <div class="panel-heading">
                    <h3 class="panel-title">修改产品</h3>
                </div>
                <form class="form-horizontal" enctype="multipart/form-data">
                <input type="text" value="{{ product.id }}" name="id" hidden>
                    <div class="panel-body">
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i
                                    class="cl_red">*</i>产品名称</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="name" value="{{ product.name }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i
                                    class="cl_red">*</i>产品状态</label>
                            <div class="col-sm-10">
                                <select name="status">
                                    {% if product.status == 0 %}
                                    <option value="0" selected>下线</option>
                                    <option value="1">上线</option>
                                    {% else %}
                                        <option value="0">下线</option>
                                        <option value="1" selected>上线</option>
                                    {% endif %}
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i
                                    class="cl_red">*</i>推荐位(1)</label>
                            <div class="col-sm-10">
                                <input type="button"  onclick="change_image(this, 'id_file_rec_1', 'img_recom_1', 'id_img_rec_1', 280, 270);" value="更改">
                                <p>支持PNG格式，重新上传将替换旧图标，请上传280x270的图标</p>
                                <div class="upload_img w_80">
                                    <img id="id_img_rec_1" src="{{ img_recom_1 }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i
                                    class="cl_red">*</i>推荐位(2)</label>
                            <div class="col-sm-10">
                                <input type="button"  onclick="change_image(this, 'id_file_rec_2', 'img_recom_2', 'id_img_rec_2', 136, 270);" value="更改">
                                <p>支持PNG格式，重新上传将替换旧图标，请上传136x270的图标</p>
                                <div class="upload_img w_80">
                                    <img id="id_img_rec_2" src="{{ img_recom_2 }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i
                                    class="cl_red">*</i>封面图</label>
                            <div class="col-sm-10">
                                <input type="button"  onclick="change_image(this, 'id_file_screen', 'img_screen', 'id_img_screen', 136, 114);" value="更改">
{#                                <input type="file" id="id_file_screen" class="form-control" name="img_screen"#}
{#                                       accept="image/jpeg, image/png"#}
{#                                       onchange="upload_image('id_file_screen', 'id_img_screen');">#}
                                <p>支持PNG格式，重新上传将替换旧图标，请上传136x114的图标</p>
                                <div class="upload_img w_80">
                                    <img id="id_img_screen" src="{{ product.img_screen }}">
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i
                                    class="cl_red">*</i>订购页面</label>
                            <div class="col-sm-10">
                                <input type="button"  onclick="change_image(this, 'id_file_order', 'img_order', 'id_img_order', 640, 530);" value="更改">
{#                                <input id="id_file_order" type="file" class="form-control" name="img_order"#}
{#                                       accept="image/png, image/jpeg"#}
{#                                       onchange="upload_image('id_file_order', 'id_img_order');">#}
                                <p>支持PNG格式，重新上传将替换旧图标，请上传640x530的图标</p>
                                <div class="upload_img w_80">
                                    <img id="id_img_order" src="{{ product.img_order }}">
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i
                                    class="cl_red">*</i>二次确认</label>
                            <div class="col-sm-10">
                                <input type="button"  onclick="change_image(this, 'id_file_confirm', 'img_confirm', 'id_img_confirm', 400, 280);" value="更改">
{#                                <input type="file" id="id_file_confirm" class="form-control" name="img_confirm"#}
{#                                       accept="image/png,image/jpeg"#}
{#                                       onchange="upload_image('id_file_confirm', 'id_img_confirm');">#}
                                <p>支持PNG格式，重新上传将替换旧图标，请上传400x280的图标</p>
                                <div class="upload_img w_80">
                                    <img id="id_img_confirm" src="{{ product.img_confirm }}">
                                </div>
                            </div>
                        </div>



                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i
                                    class="cl_red">*</i>游戏地址</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="url" value="{{ product.url }}">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label"><i
                                    class="cl_red">*</i>推荐值</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="recommended_value" value="{{ product.recommended_value }}">
                            </div>
                        </div>

                        <div class="form-group" style="margin-left: 45%; margin-right: 45%">
                            <input type="button" id="btn_add" class="btn btn-info btn-block my_btn_03" onclick="update_product();" value="确定">
{#                            </input>#}
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
{% endblock %}